今天的主題是 RWD（Responsive Web Design，響應式設計）。其實我會想寫這個，是因為在專輯展示區的程式碼裡，我有看到 @media 的部分，但當下只是照著用，並不太清楚它的意義。

什麼是 RWD？

RWD 的全名是 Responsive Web Design，中文叫「響應式網頁設計」。
簡單來說，它的目的就是：
👉 讓同一個網站，在電腦、平板、手機上都能有良好的顯示效果。

因為不同裝置的螢幕大小差很多，如果只用固定的寬度去寫網頁，很容易發生電腦版好看，但手機版卻跑版的情況。RWD 就是為了解決這個問題而出現的。

它的核心概念有三個：

1. 彈性版面（Fluid Grid）：版面不是用固定像素，而是用百分比或相對單位。
2. 彈性圖片（Flexible Images）：圖片會隨著容器大小縮放。
3. 媒體查詢（Media Queries）：針對不同的螢幕寬度，給予不同的 CSS。

專輯展示區的 RWD 範例

在我的專輯輪播程式碼中，我就有用到媒體查詢（Media Queries）：

/* 響應式設計 */
/* 平板版：螢幕寬度小於 768px */
@media (max-width: 768px) {
    .carousel-container {
        padding: 0 20px;
    }
    
    .album-card {
        width: 180px;
        margin-right: 10px;
    }
    
    .album-card img {
        height: 180px;
    }
    
    .carousel-btn {
        width: 45px;
        height: 45px;
        font-size: 20px;
    }
}

/* 手機版：螢幕寬度小於 480px */
@media (max-width: 480px) {
    .carousel-container {
        padding: 0 15px;
    }
    
    .album-card {
        width: 160px;
        margin-right: 8px;
    }
    
    .album-card img {
        height: 160px;
    }
}

意思是：

• 平板 (小於 768px) → 卡片縮小、按鈕縮小，讓版面更緊湊。
• 手機 (小於 480px) → 卡片再縮小，圖片高度也變小，避免畫面撐爆。

透過這樣的設定，不管讀者是用電腦、平板還是手機打開網站，都能看到「專輯輪播區域」排版合理、不卡卡的畫面。

為什麼 RWD 重要？

• 行動裝置普及：現在很多人上網是用手機，如果網頁在手機上不好用，使用者可能直接關掉。
• 提升使用者體驗（UX）：不需要放大縮小，也不用左右滑來滑去。
• SEO 友善：Google 也把「手機友善」當成排名的依據之一。

RWD 效果圖示對照表

說明：

• 透過 @media，我們可以針對不同螢幕寬度，設定不同的 CSS 屬性。
• 卡片、圖片、按鈕大小都會自動調整，使用者不用左右拖拉，操作體驗更順暢。
• 這就是 RWD 的核心概念：自動適應各種裝置。